import React from 'react';
import './index.css';

// 定义列的接口
interface TableColumn<T> {
  title: string;
  dataIndex: keyof T;
  key: string;
  render?: (text: any, record: T) => React.ReactNode;
  width?: number | string;
}

// 定义表格组件的Props接口
interface TableProps<T> {
  columns: TableColumn<T>[];
  dataSource: T[];
  loading?: boolean;
  rowKey?: keyof T;
  className?: string;
}

const Table = <T extends Record<string, unknown>>({
  columns,
  dataSource,
  loading = false,
  rowKey = 'id',
  className = '',
}: TableProps<T>) => {
  return (
    <div className={`custom-table-wrapper ${className}`}>
      {loading && (
        <div className="table-loading">
          <div className="loading-spinner" />
        </div>
      )}
      
      <table className="custom-table">
        <thead>
          <tr>
            {columns.map((column) => (
              <th 
                key={column.key}
                style={{ width: column.width }}
              >
                {column.title}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {dataSource.map((record) => (
            <tr key={String(record[rowKey])}>
              {columns.map((column) => (
                <td key={column.key}>
                  {column.render
                    ? column.render(record[column.dataIndex], record)
                    : record[column.dataIndex]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      
      {dataSource.length === 0 && (
        <div className="table-empty">
          <div className="table-empty-icon">📊</div>
          暂无数据
        </div>
      )}
    </div>
  );
};

export default Table; 